<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css"
			href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript"
			src="../../scripts/form/FileUploadField.js"></script>
        <script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript" src="../../scripts/selectProductDZColor.js">
        </script>
        <script type="text/javascript">
        	var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
        	var orderMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.order');
        	var dzColorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.dzcolor');
            var pantoneMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
			var yarnMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.yarn');
			var customerMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var colorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
			
			var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
			
			var orderProductId = getPrarmeterValue(window.location, 'id');
            var startPage = getPrarmeterValue(window.location, 'startPage');
			
			var itemForm;
			var itemStore;
            var itemGrid;

            var productDZColorXMLReader = new Ext.data.XmlReader({
                record: 'item'
            }, [{
                name: 'id',
                mapping: 'id'
            },{
            	name: 'sequence',
            	mapping: 'sequence'
            },{
            	name: 'variant',
            	mapping: 'variant'
            },{
                name: 'dzColorId',
                mapping: 'dzColorId'
            },{
                name: 'dzColorCode',
                mapping: 'dzColorCode'
            },{
                name: 'yarnReference',
                mapping: 'yarnReference'
            },{
                name: 'ctYarnMeasure',
                mapping: 'ctYarnMeasure'
            },{
                name: 'yarnAccount',
                mapping: 'yarnAccount'
            },{
                name: 'ctYarnMaterial1',
                mapping: 'ctYarnMaterial1'
            },{
                name: 'ctYarnMaterial2',
                mapping: 'ctYarnMaterial2'
            },{
                name: 'ctYarnMaterial3',
                mapping: 'ctYarnMaterial3'
            },{
                name: 'ctYarnMaterial4',
                mapping: 'ctYarnMaterial41'
            },{
                name: 'ctYarnMaterial5',
                mapping: 'ctYarnMaterial5'
            },{
                name: 'customerColorCode',
                mapping: 'customerColorCode'
            },{
                name: 'percentage',
                mapping: 'percentage'
            },{
                name: 'loss',
                mapping: 'loss'
            },{
                name: 'actualWeight',
                mapping: 'actualWeight'
            },{
                name: 'factoryName',
                mapping: 'factoryName'
            },{
				name: 'photo3Name',
				mapping: 'photo3Name'
            }]);
			
			var orderProductXMLReader = new Ext.data.XmlReader({
	                record: 'item'
	            }, [{
                    name: 'id',
                    mapping: 'id'
                },{
                    name: 'piId',
                    mapping: 'piId'
                },{
                    name: 'piReference',
                    mapping: 'piReference'
                },{
                    name: 'ctSeasonNumber',
                    mapping: 'ctSeasonNumber'
                },{
                    name: 'sketch1Name',
                    mapping: 'sketch1Name'
                },{
                    name: 'sketch2Name',
                    mapping: 'sketch2Name'
                },{
                    name: 'sketch3Name',
                    mapping: 'sketch3Name'
                },{
                    name: 'piReference',
                    mapping: 'piReference'
                },{
                    name: 'customerName',
                    mapping: 'customerName'
                },{
                    name: 'customerDepartment',
                    mapping: 'customerDepartment'
                },{
                    name: 'createDate',
                    mapping: 'createDate'
                },{
                    name: 'style',
                    mapping: 'style'
                },{
                    name: 'departureDate',
                    mapping: 'departureDate'
                },{
                    name: 'orderNumber',
                    mapping: 'orderNumber'
                },{
                    name: 'mainComposition',
                    mapping: 'mainComposition'
                },{
                    name: 'ctStatureCode',
                    mapping: 'ctStatureCode'
                }]);

			var orderProductXmlLoader = new xmlLoader('../../servlet/OrderProductServlet?action=11&id=' + orderProductId);
			var orderProductRecord = orderProductXMLReader.readRecords(orderProductXmlLoader.getXml()).records[0];
			var itemTplMarkup = [
						'<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
							'<tr><td style="background:#eeeeee; width: 15%;">',
							piMessage.get('ui.productidentification.seasonnumber'),
							'</td><td>{ctSeasonNumber}</td>',
							'<td style="background:#eeeeee;width: 15%;">',
							piMessage.get('ui.productidentification.chart'),
							'</td><td>{piReference}</td>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.customername'),
							'</td><td>{customerName}</td></tr>',
							
							'<tr><td style="background:#eeeeee; width: 15%;">',
							 message.get('message.edit.date')+ '(d/m/Y)',
							'</td><td>{createDate}</td>',
							'<td style="background:#eeeeee;width: 15%;">',
							piMessage.get('ui.productidentification.style'),
							'</td><td>{style}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.department'),
							'</td><td>{customerDepartment}</td></tr>',

							'<tr><td style="background:#eeeeee; width: 15%;">',
							orderMessage.get('ui.order.departuredata')+ '(d/m/Y)',
							'</td><td>{departureDate}</td>',
							'<td style="background:#eeeeee;width: 15%;">',
							yarnMessage.get('ui.yarn.composition'),
							'</td><td>{mainComposition}</td>',
							'<td style="background:#eeeeee;">',
							piMessage.get('ui.productidentification.ordernumber'),
							'</td><td>{orderNumber}</td></tr>',
														
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.measurespecification.photo'),
							'</td><td colspan="5"><img height="200" src="../../_temp/{sketch1Name}">&nbsp;&nbsp;&nbsp;&nbsp;<img height="200" src="../../_temp/{sketch2Name}"></td></tr>',
						'</tbody></table>'
			];
			
            var itemTpl = new Ext.Template(itemTplMarkup);
            var sizeNameArray = getMeasureSpecificationItemName(orderProductRecord.data.ctStatureCode);


            var selectProductDZColorCallback = function(id, variant){
				Ext.getCmp('productDZColorId').setValue(id);
				Ext.getCmp('variant').setValue(variant);
            }

            var calculate = function(){
				var size1 = Ext.getCmp('size1Quantity').getValue();
				size1 = (size1==''?0:parseInt(size1));
				var size2 = Ext.getCmp('size2Quantity').getValue();
				size2 = (size2==''?0:parseInt(size2))
				var size3 = Ext.getCmp('size3Quantity').getValue();
				size3 = (size3==''?0:parseInt(size3))
				var size4 = Ext.getCmp('size4Quantity').getValue();
				size4 = (size4==''?0:parseInt(size4))
				var size5 = Ext.getCmp('size5Quantity').getValue();
				size5 = (size5==''?0:parseInt(size5))
				var size6 = Ext.getCmp('size6Quantity').getValue();
				size6 = (size6==''?0:parseInt(size6))
				var size7 = Ext.getCmp('size7Quantity').getValue();
				size7 = (size7==''?0:parseInt(size7))
				var size8 = Ext.getCmp('size8Quantity').getValue();
				size8 = (size8==''?0:parseInt(size8))
				Ext.getCmp('total').setValue(size1 + size2 + size3 + size4 + size5 + size6 + size7 + size8);
            }
            
            var editCallback = function(){
					itemForm.getForm().load({
						url:'../../servlet/OrderProductItemServlet?action=3&id=' + editId, 
						waitMsg:Ext.LoadMask.prototype.msg, 
						success: function(form, action){
						},
						failure: function(o){
							messageTip.msg(message.get('message.tip'), message.get('message.load.unsuccessful'));
						}
					});
				}
            
            var deleteCallback = function(btn){
	                if (btn == 'yes') {
	                    Ext.Ajax.request({
	                        url: '../../servlet/OrderProductItemServlet?action=2&id=' + deleteId,
	                        success: function(o){
	                            if (o.responseText == 'success') {
	                                itemStore.reload();
	                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
	                            }
	                            else {
	                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
	                            }
	                        },
	                        failure: function(o){
	                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
	                        },
	                        params: {
	                            foo: 'bar'
	                        }
	                    });
	                }
	            }
            
			Ext.onReady(function(){
				itemTpl.append('orderProduct', orderProductRecord.data);
				
				Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';

                itemForm = new Ext.FormPanel({
			        labelAlign: 'left',
					url: '../../servlet/OrderProductItemServlet?action=1',
			        frame:true,
			        title: orderMessage.get('ui.order.variant'),
			        bodyStyle:'padding:5px 5px 5px 5px;margin-top: 2px;',
			        width: '100%',
					labelWidth: 125,
					reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    },{
                        name: 'productDZColorId',
                        mapping: 'productDZColorId'
                    },{
                        name: 'variant',
                        mapping: 'variant'
                    },{
                        name: 'total',
                        mapping: 'total'
                    },{
                        name: 'size1Quantity',
                        mapping: 'size1Quantity'
                    },{
                        name: 'size2Quantity',
                        mapping: 'size2Quantity'
                    },{
                        name: 'size3Quantity',
                        mapping: 'size3Quantity'
                    },{
                        name: 'size4Quantity',
                        mapping: 'size4Quantity'
                    },{
                        name: 'size5Quantity',
                        mapping: 'size5Quantity'
                    },{
                        name: 'size6Quantity',
                        mapping: 'size6Quantity'
                    },{
                        name: 'size7Quantity',
                        mapping: 'size7Quantity'
                    },{
                        name: 'size8Quantity',
                        mapping: 'size8Quantity'
                    }]),
					collapsible: true,
			        items: [{
	                        id: 'orderProductId',
	                        name: 'orderProductId',
	                        xtype: 'hidden',
							value: orderProductRecord.data.id
                    	},{
	                        id: 'productDZColorId',
	                        name: 'productDZColorId',
	                        xtype: 'hidden'
                    	},{
	                        id: 'id',
	                        name: 'id',
	                        xtype: 'hidden'
                    	},{
                            layout: 'column',
                            items: [{
                                columnWidth: .5,
                                layout: 'form',
                                items: [{
				                    xtype:'textfield' ,
				                    fieldLabel: dzColorMessage.get('ui.dzcolor.variant'),
									id: 'variant',
				                    name: 'variant',
				                    allowBlank: false,
				                    emptyText: message.get('message.combo.pleaseselect'),
				                    anchor:'76%',
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('variant').getEl().on('click', function(){
                                                    selectProductDZColor(selectProductDZColorCallback, orderProductRecord.data.piId);
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
				                }]
							
							},{
				                columnWidth:.5,
				                layout: 'form',
				                items: [{
				                    xtype:'numberfield',
				                    fieldLabel: message.get('message.list.total') +  '&nbsp;/&nbsp;' + dzColorMessage.get('ui.dzcolor.variant') + '&nbsp;&nbsp;<img src="../../images/icons/calculator.png" onclick="calculate();"/>',
									id: 'total',
				                    name: 'total',
				                    allowBlank: false,
				                    anchor:'76%'
				                }]
				            }]
						},{
							xtype: 'fieldset',
							collapsible: true,
							title: '&nbsp;',
							autoHeight: true,
							items: [{
	                            layout: 'column',
	                            items: [{
	                                columnWidth: .25,
	                                layout: 'form',
	                                items: [{
					                    xtype:'numberfield' ,
					                    fieldLabel: sizeNameArray[0],
										id: 'size1Quantity',
					                    name: 'size1Quantity',
					                    anchor:'90%',
										tabIndex: 3
					                },{
					                    xtype:'numberfield',
					                    fieldLabel: sizeNameArray[4],
										id: 'size5Quantity',
					                    name: 'size5Quantity',
					                    anchor:'90%',
										tabIndex: 6
					                }]
								
								},{
					                columnWidth:.25,
					                layout: 'form',
					                items: [{
					                    xtype:'numberfield',
					                    fieldLabel: sizeNameArray[1],
										id: 'size2Quantity',
					                    name: 'size2Quantity',
					                    anchor:'90%',
										tabIndex: 3
					                },{
					                    xtype:'numberfield',
					                    fieldLabel: sizeNameArray[5],
										id: 'size6Quantity',
					                    name: 'size6Quantity',
					                    anchor:'90%',
										tabIndex: 7
					                }]
					            },{
					                columnWidth:.25,
					                layout: 'form',
					                items: [{
					                    xtype:'numberfield',
					                    fieldLabel: sizeNameArray[2],
										id: 'size3Quantity',
					                    name: 'size3Quantity',
					                    anchor:'90%',
										tabIndex: 4
					                },{
					                    xtype:'numberfield',
					                    fieldLabel: sizeNameArray[6],
										id: 'size7Quantity',
					                    name: 'size7Quantity',
					                    anchor:'90%',
										tabIndex: 8
					                }]
					            },{
					                columnWidth:.25,
					                layout: 'form',
					                items: [{
					                    xtype:'numberfield',
					                    fieldLabel: sizeNameArray[3],
										id: 'size4Quantity',
					                    name: 'size4Quantity',
					                    anchor:'90%',
										tabIndex: 5
					                },{
					                    xtype:'numberfield',
					                    fieldLabel: sizeNameArray[7],
										id: 'size8Quantity',
					                    name: 'size8Quantity',
					                    anchor:'90%',
										tabIndex: 8
					                }]
					            }]
							}]
						}],
			
			        buttons: [{
			            text: message.get('message.edit.save'),
						handler: function(){
                            if (itemForm.getForm().isValid()) {
                                itemForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        itemForm.getForm().reset();
										itemStore.load();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
			        },{
						text: message.get('message.edit.reset'),
						handler: function(){
							itemForm.getForm().reset();
							dzColorTipImg = 'noimage.gif';
						}
					},{
			            text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'order_product_list.html?startPage=' + startPage;
                            }else {
                                window.location = 'order_product_list.html';
                            }
                        }
			        }]
			    });
				
                itemForm.render('item');

                itemStore = new Ext.data.Store({
                    url: '../../servlet/OrderProductItemServlet?action=5&id=' + orderProductRecord.data.id,
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'index','variant', 'reference', 'size1Quantity','size2Quantity','size3Quantity', 'size4Quantity',
                    'size5Quantity','size6Quantity','size7Quantity', 'size8Quantity','total','percentage','actureWeight', 'id']),
                    
                    remoteSort: false
                });
                
                var expander = new Ext.grid.RowExpander({
			        tpl : new Ext.XTemplate(
					    '{[this.getDZColor(values.id, values.total)]}',
						'<br/><table cellspacing="0" id="the-table" style="width: 80%;margin-left: 100px;">',
							'<tr><td style="background:#eeeeee;">' + sizeNameArray[0] + '</td>',
							'<td style="background:#eeeeee;">' + sizeNameArray[1] + '</td>',
							'<td style="background:#eeeeee;">' + sizeNameArray[2] + '</td>',
							'<td style="background:#eeeeee;">' + sizeNameArray[3] + '</td>',
							'<td style="background:#eeeeee;">' + sizeNameArray[4] + '</td>',
							'<td style="background:#eeeeee;">' + sizeNameArray[5] + '</td>',
							'<td style="background:#eeeeee;">' + sizeNameArray[6] + '</td>',
							'<td style="background:#eeeeee;">' + sizeNameArray[7] + '</td></tr>',
							'<tr><td>{size1Quantity}</td><td>{size2Quantity}</td><td>{size3Quantity}</td><td>{size4Quantity}</td><td>{size5Quantity}</td><td>{size6Quantity}</td><td>{size7Quantity}</td><td>{size8Quantity}</td></tr>',
						'</table><br/>',{
							getDZColor:function(id, total){
								var variantXmlLoader = new xmlLoader('../../servlet/OrderProductItemServlet?action=20&id=' + id);
								var variantRecords = productDZColorXMLReader.readRecords(variantXmlLoader.getXml()).records;
								var html = '<br/><table cellspacing="0" id="the-table" style="width: 80%;margin-left: 100px;"><tr>';
								html += ('<td style="background:#eeeeee;">' + dzColorMessage.get('ui.dzcolor.customercolorcode') + '</td>');
								html += ('<td style="background:#eeeeee;">' + dzColorMessage.get('ui.dzcolor.code') + '</td>');
								html += ('<td style="background:#eeeeee;">' + yarnMessage.get('ui.yarn.reference') + '</td>');
								html += ('<td style="background:#eeeeee;">' + dzColorMessage.get('ui.dzcolor.percentage') + '(%)</td>');
								html += ('<td style="background:#eeeeee;">' + dzColorMessage.get('ui.dzcolor.actualweight') + '(Kg)</td>');
								html += ('<td style="background:#eeeeee;">' + dzColorMessage.get('ui.dzcolor.actualweight') + '&nbsp;/&nbsp;' + orderMessage.get('ui.order.color') + '(Kg)</td>');
								html += '</tr>';
								
								for(var i = 0; i < variantRecords.length; i ++){
									var record = variantRecords[i];
									html += '<tr>';
									html += ('<td>' + record.data.customerColorCode + '</td>');
									html += ('<td>' + record.data.dzColorCode + '</td>');
									html += ('<td>' + record.data.yarnReference + '</td>');
									html += ('<td style="text-align: right;">' + record.data.percentage + '</td>');
									html += ('<td style="text-align: right;">' + record.data.actualWeight + '</td>');
									html += ('<td style="text-align: right;">' + render3D((record.data.actualWeight * total)) + '</td>');
									html += '</tr>';
								}
								
								html += '</table>'
								
					         	return html;
					     	}
						}
			        )
			    });

                itemGrid = new Ext.grid.GridPanel({
                    title: orderMessage.get('ui.order.variantlist'),
                    store: itemStore,
					stripeRows: true,
					plugins: [expander],
                    height: 560,
                    columns: [expander, {
                        header: message.get('message.list.id'),
                        width: 20,
                        dataIndex: 'index'
                    }, {
                        header: orderMessage.get('ui.order.reference'),
                        dataIndex: 'reference',
                        sortable: true
                    }, {
                        header: dzColorMessage.get('ui.dzcolor.variant'),
                        dataIndex: 'variant',
                        sortable: true
                    }, {
                        header: message.get('message.list.total') + '&nbsp;/&nbsp;' + dzColorMessage.get('ui.dzcolor.variant'),
                        dataIndex: 'total',
                        align: 'right',
                        sortable: true
                    }, {
                        header: dzColorMessage.get('ui.dzcolor.percentage') + '(%)',
                        dataIndex: 'percentage',
                        align: 'right',
                        sortable: true,
                        renderer: function(value, p, record, rowIndex, colIndex, store){
                        	var totalWeight =  0;
                        	for(var i = 0; i < store.getCount(); i ++){
                            	totalWeight += parseFloat(store.getAt(i).data.actureWeight);
                        	}
							return render2D((record.data.actureWeight * 100)/totalWeight);
                    	}
                    }, {
                        header: dzColorMessage.get('ui.dzcolor.actualweight') + '&nbsp;/&nbsp;' + dzColorMessage.get('ui.dzcolor.variant') + '(Kg)',
                        dataIndex: 'actureWeight',
                        sortable: true,
                        align: 'right',
                        renderer: render3D
                    },{
                        header: message.get('message.list.eidt'),
                        width: 30,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        width: 30,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderDelete
                    }],
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    renderTo: 'itemList'
                });
                
                itemStore.load();
                //itemStore.setDefaultSort('index', 'asc');

                function renderEdit(value, p, record){
					if(record.id == -1){
						return '';
					}
                    return String.format('<a href="javascript: editItem(editCallback, {0});"><img src="../../images/icons/pencil.png" title="' + message.get('message.list.eidt') + '" /></a>', record.id);
                }
                
                function renderDelete(value, p, record){
                	if(record.id == -1){
						return '';
					}
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="' + message.get('message.list.delete') + '"/></a>', record.id);
                }
			});
        
        </script>
    </head>
    <body>
       <div id="orderProduct">
				
		</div>
		<div id="item">
				
		</div>
		<div id="itemList">
			
		</div>
    </body>
</html>
